<template>
  <div ref="chart" :style="{width: realWidth, height: realHeight}"></div>
</template>

<script>
import * as echarts from 'echarts';

let realWidth = ref("");
let realHeight = ref("");

const props = {
  options: {
    type: Object,
    required: true
  },
  width: {
    type: [Number, String],
    default: "100%"
  },
  height: {
    type: [Number, String],
    default: "100%"
  }
};

export default {
  name: 'ECharts',
  props: props,
  mounted() {
    this.chart = echarts.init(this.$refs.chart);
    this.chart.setOption(this.options);

    window.addEventListener("resize", () => {
      this.chart.resize();
    })
  },
  watch: {
    options: {
      deep: true,
      handler(newOptions) {
        this.chart.setOption(newOptions);
      }
    }
  },
  computed() {
      realWidth = ()=> { typeof props.width == "string" ? props.width : `${props.width}px` };
      realHeight = ()=> {  typeof props.height == "string" ? props.height : `${props.height}px` };
  },
  beforeDestroy() {
    this.chart.dispose();
  }
};
</script>

<style scoped>
</style>